<template>
  <div class="editor-container">
    <div class="editor-container-tag">
      文章标题
    </div>
    <div>
      <el-input v-model="blog.title" placeholder="请输入文章标题" />
    </div>
    <div class="editor-container-tag">
      文章内容
    </div>
    <div style="width:100%">
      <Editor ref="markdownEditor" height="500px" :initial-value="content" />
    </div>
    <div class="editor-container-tag">
      文章简介
    </div>
    <div style="width: 70%;">
      <el-input v-model="blog.descrition" type="textarea" rows="4" placeholder="请输入文章内容" maxlength="200" resize="none" show-word-limit="true" />
    </div>
    <div class="editor-container-tag">
      文章类别
    </div>
    <div>
      <el-select v-model="blog.blogType" placeholder="请选择分类">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
    </div>
    <div class="editor-container-tag">
      文章头图
    </div>
    <div style="width:300px">
      <Upload :img-url="blog.thums" @upload="tumbUrl" />
    </div>
    <div class="editor-container-tag">
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </div>
</template>

<script>
import '@toast-ui/editor/dist/toastui-editor.css'
import { Editor } from '@toast-ui/vue-editor'
import Upload from '@/components/uploade'
import { get_requset, Post_requset } from '@/api/publicRequest'
import { apiA, apiAddBlog, apiUpBlog } from '@/routerConfig'
import { mapGetters } from 'vuex'
import { Message } from 'element-ui'
export default {
  components: {
    Editor,
    Upload
  },
  data() {
    return {
      content: '',
      blog: {
        htmlContent: '',
        descrition: '',
        title: '',
        thums: '',
        blogType: ''
      },
      options: [],
      isBlog: false
    }
  },
  computed: {
    ...mapGetters(['blogTypeLists'])
  },
  async beforeMount() {
    if (!(this.blogTypeLists.length > 0)) await this.$store.dispatch('banner/getBlogType')
    this.options = this.blogTypeLists
    if (this.$route.query._id) {
      const { data } = await get_requset(`${apiA}/${this.$route.query._id}`)
      for (const p in this.blog) {
        this.blog[p] = data[p]
      }
      this.blog._id = this.$route.query._id
      this.$refs['markdownEditor'].invoke('setHTML', this.blog.htmlContent)
    }
  },
  methods: {
    tumbUrl(e) {
      this.blog.thums = e
    },
    async submit() {
      this.blog.htmlContent = this.$refs['markdownEditor'].invoke('getHTML')
      this.isBlog = true
      for (const p in this.blog) {
        if (!this.blog[p]) {
          Message.error(`${p}不能为空`)
          this.isBlog = false
          break
        }
      }
      if (this.isBlog) {
        this.blog.MarkdownContent = this.$refs.markdownEditor.invoke('getMarkdown')
        if (this.blog._id) {
          const { data } = await Post_requset(apiUpBlog, {
            blog: this.blog
          })
          if (typeof data === 'string') {
            Message.error(data)
          } else {
            Message.success('修改成功')
            this.$router.push({
              name: 'blogList'
            })
          }
        } else {
          const { data } = await Post_requset(apiAddBlog, {
            blog: this.blog
          })
          if (typeof data === 'string') {
            Message.error(data)
          } else {
            Message.success('添加成功')
            this.$router.push({
              name: 'blogList'
            })
          }
        }
      }
    }
  }
}
</script>

<style>
.editor-container{
  width: 100%;
  padding: 20px;
}
.te-preview {
  width: 700px !important;
}
.editor-container-tag{
  margin: 20px 0;
}
</style>
